<template>
  <h2>电影列表</h2>

  <ul>
    <li v-for="item in list" :key="item.filmId">
      <!-- <RouterLink :to="`/film/${item.filmId}`"> -->
      <RouterLink :to="{ name: 'film', params: { id: item.filmId } }">
        {{ item.name }}
      </RouterLink>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },

  methods: {
    refresh() {
      const url =
        "https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=52642";
      fetch(url, {
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
      })
        .then((response) => response.json())
        .then((result) => {
          // console.log(result);
          // 判断业务状态码 status
          if (result.status !== 0) {
            alert(result.msg);
            return;
          }

          this.list = result.data.films;
        });
    },
  },

  created() {
    console.log("FilmList created");
    this.refresh();
  },
};
</script>
